<template>
  <div class="box">
    <p class="title">提交申请</p>
    <el-form :model="info" status-icon ref="form" label-width="140px" :rules="rules">
      <el-form-item label="产品名称" prop="productName">
        <el-input v-model="info.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品价格" prop="productPrice">
        <el-input v-model="info.productPrice"></el-input>
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input v-model="info.supplierName"></el-input>
      </el-form-item>
      <el-form-item label="供应商联系方式" prop="supplierTel">
        <el-input maxlength="11" v-model.number="info.supplierTel"></el-input>
      </el-form-item>
      <el-form-item class="all-handle-btn-box">
        <el-button type="primary" @click="handleCertain(info)">确定</el-button>
        <router-link class="back-btn" to="/product/auditing"><el-button>返回</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
      return {
        info: {},
        rules: {
          productName: {required: true, message: '产品名称不能为空', trigger: 'change'},
          productPrice: {required: true, message: '产品价格不能为空', trigger: 'change'},
          supplierName: {required: true, message: '供应商名称不能为空', trigger: 'change'},
          supplierTel: {required: true, pattern: /^\d{7,11}$/, message: '	供应商联系方式不能为空', trigger: 'change'}
        }
      }
    },
    methods: {
      handleCertain(info) {
        this.$refs.form.validate(bool => {
          if (bool) {
            this.$confirm("确定要提交申请么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              //提交申请操作
              console.log(info);

            }).catch(() => {});
          }
        });
      }
    }
};
</script>

<style scoped>
.box {
  padding: 30px;
}
.el-form {
  width: 50%;
  margin: 0 auto;
}
.title {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
}
.back-btn {
  margin-left: 10px;
}
</style>
